<template>
	<view class="container">
		<view class="image-container">
			<image :src="outputBase64(currentTeam.imagePath)" mode="aspectFill" class="team-avatar" />
		</view>
		<view style="margin-top: 5vh;">
			<view class="team-name-container">
			    <text class="team-name">{{ currentTeam.teamName }}</text>
			</view>
			<view style="width: 500rpx;margin-left: 120rpx;margin-top: 3vh;">
			    <text class="team-description">{{ currentTeam.description }}</text>
			</view>
		</view>
		<button type="primary" class="join-btn" @click="joinTeam">
			<text style="font-weight: bold;color: white;">我要入队</text>
		</button>
	</view>
</template>

<script>
	import api from '../../api/api';
	export default {
		data() {
			return {
				currentTeam: {
					teamId: null,
					teamName: '',
					imagePath: '',
					description:''
				},
				
			}
		},
		onLoad(option) {
			console.info(option)
			this.currentTeam.teamId=Number(option.team_id)
			this.getTeam()
		},
		methods: {
			getTeam(){
				api.getTeamById({teamId:this.currentTeam.teamId}).then(res => {
					// console.log(res)
					this.currentTeam=res.data.data
				})
			},
			outputBase64(base64Url) {
				/// 获取到base64Data
				var base64Data = base64Url;
				/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
				base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
				/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
				const base64ImgUrl = "data:image/png;base64," + base64Data;
				/// 得到的base64ImgUrl直接给图片:src使用即可
				return base64ImgUrl;
			},
			joinTeam(){
				let obj = {
					teamId: this.currentTeam.teamId,
					token: uni.getStorageSync('WeTeamToken')
				}
				api.joinTeam(obj).then(res => {
					console.info(res)
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: res.data.message,
						success(res) {
							if (res.confirm) {
								// console.log('用户点击确定')
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/team_main/team_main'
									});
								
								}, 800);
							} else if (res.cancel) {
								// console.log('用户点击取消')
							}
						}
					})
				})
			}
		}
	}
</script>

<style>
.container {
		padding: 20rpx;
		background-color: #F2F2F2;
		height: 95vh;
	}
.join-btn {
		width: 80%;
		margin: 0 auto;
		position: fixed;
		bottom: 60rpx;
		left: 70rpx;
		background-color: #5A91F7
	}
.team-avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		margin-top: 10vh;
	}
.team-name-container {
  display: flex;            /* 使用Flexbox布局 */
  justify-content: center;  /* 水平居中 */
  width: 100%;              /* 确保容器占满整个父元素的宽度 */
  text-align: center;       /* 确保文本在容器内居中 */
}
.team-name {
  font-size: 24px;          /* 字体大小 */
  font-weight: bold;        /* 字体加粗 */
  /* margin-left: 250rpx;  移除左外边距，因为我们使用了Flexbox居中 */
}
.team-description {
  font-size: 17px;          /* 字体大小 */
  font-weight: bold;        /* 字体加粗 */
  color: gray;
  /* margin-left: 250rpx;  移除左外边距，因为我们使用了Flexbox居中 */
}
.image-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    width: 100%; /* 容器宽度 */
}
</style>
